<template>
  <div class="forget-input">
    <forget-back-btn>
      <div slot="set-title" class="login-title">忘记密码</div>
      <div slot="border-bottom" class="border-bottom"></div>
    </forget-back-btn>

    <el-form ref="forgetFormRef" :model="forgetForm" :rules="forgetFormRules">
      <!-- 手机号 -->
      <el-form-item class="forget-input-phone" prop="phone">
        <el-input v-model="forgetForm.phone"></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item class="forget-input-verification" prop="smsCode">
        <el-input v-model="forgetForm.smsCode"> </el-input>
        <span @click="getCode" v-show="show">获取验证码</span>
        <span v-show="!show">剩余{{ count }}s</span>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" class="btn" @click="next">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ForgetBackBtn from "./components/backButton";
import {getSmsCode} from "network/login";
export default {
  name: "Forget",
  components: {
    ForgetBackBtn,
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        // console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      //发送验证码是否显示剩余事件
      show: true,
      count: 60,
      timer: null,
      //这里是登陆表单的数据绑定对象
      forgetForm: {
        phone: "15254030529",
        smsCode: "666666",
      },
      forgetFormRules: {
        phone: [{ validator: checkPhone, trigger: "blur" }],
         smsCode:[ 
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
           pattern:/^\d{4}$/, message: '你的验证码格式不正确' 
          }],
      },
    };
  },
  methods: {

    next () {
       this.$refs.forgetFormRef.validate(async (vaid) => {
         if (!vaid) return;
          this.$router.push('/setpas')
       })
    },

   //获取验证码
    getCode () {
      if(!this.timer){
         this.show = false;
         this.timer = setInterval(() => {
           if (this.count > 0 && this.count <= 60) {
            this.count--;
           }else {
             this.show = true;
             clearInterval(this.timer);  // 清除定时器
             this.timer = null;
             this.count = 60
           }
         },1000)
      }
      getSmsCode (this.forgetForm.phone).then (res => {
        console.log(res)
      })
    },
  }
};
</script>

<style lang="less" scoped>
/deep/.el-form-item__content {
    height: .4rem;
  }
.forget-input {
  .forget-input-phone {
    margin: 0.25rem 0.52rem 0 0.52rem;
  }
  .forget-input-verification {
    margin: 0.25rem .52rem 0 0.52rem;
    span {
      top: -0.4rem;
      left: 1.93rem;
      position: relative;
      text-align: center;
      font-size: 0.14rem;
      color: #d20a0a;
    }
  }
  .btn {
    width: 1.85rem;
    height: 0.4rem;
    font-size: 0.15rem;
    color: #ffffff;
    text-align: center;
    margin-top: .35rem;
    margin-left: 0.95rem;
    background: #d20a0a;
  }
  .forgetpas {
    margin-left: 1.6rem;
  }
}
</style>
